<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员管理</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <!--    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
</head>

<script>
    function showManager(){
        $.ajax({
            url:"/showManager",
            type:"post",
            dataType:"json",
            success:function (list){
                listManager(list)
            },
            error:function(list){
                alert("获取管理人员失败！")
            }
        })
    }

    function listManager(jsonArray){
        //清空table
        var table = document.getElementById("tab");
        arr = table.getElementsByTagName("tr");
        //alart(arr.length);
        //不能用i++的方式去删除，双数行删不掉，删掉第一行的时候第二行变成第一行，下一次删的是第三行。
        //所以采用从最后开始的删除方法。
        for(var i=arr.length-1;i>0;i--){
            table.deleteRow(i);
        }

        var str = "";
        var length=jsonArray.length;
        for (var i=0;i<length;i++){
            str = "<tr><td><input type='checkbox' id='checkid' value="+ i +"/></td><td>"
                +jsonArray[i].uid+"</td><td>"
                +jsonArray[i].uname+"</td><td>"
                +jsonArray[i].limit+"</td><td>"
                +jsonArray[i].tips+"</td><tr>"
            $("#tab").append(str)
        }
    }

    //移除管理员权限的函数
    function remove(){
        var input = document.getElementsByTagName("input")
        var length = input.length
        for (var i=0;i<length;i++){
            var obj = input[i];
            if (obj.type == "checkbox" && obj.checked) {
                var uid = $(input[i]).parents("tr").find("td").eq(1).text();
                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: "/removeManager",
                    data: {
                        "uid": uid,
                    },
                    success: function (list) {
                        listManager(list)
                    },
                    error: function () {
                        alert("移除工号为"+uid+"的管理员权限失败!")
                    }
                })
            }
        }
        showManager();
    }

    //添加管理员的函数
    function addmanager(){
        $("#addmanager").dialog();
    }

    $(function(){
        showManager()

        var arrayObj = new Array();

        $("#addmanager").hide();

        //先给名字输入框赋值，方便联想查找。因为钉钉里面名字也是唯一的所以不用担心重名。
        $.ajax({
            url:"/database_message",
            dataType:"json",
            type:"post",
            success:function(jsonArray){
                var length=jsonArray.length;
                for (var i=0;i<length;i++){
                    arrayObj.push(jsonArray[i].uname)
                }
                //这是为了填充input实现联想查找
                $("#user").autocomplete({
                    source: jsonArray,
                    // 定义至少输入几个字
                    minLength: 1,
                });
            },
            error:function(){
                alert("数据库读取名字失败！")
            }
        })

        $("#insert").click(function (){
            addmanager()
        })

        $("#remove").click(function (){
            if (confirm("确认要移除选中人员的管理员权限吗？")){
                remove()
            }
        })

        $("#submit").click(function (){
            $("#addmanager").hide();
            var uname = document.getElementById("user").value;
            $.ajax({
                url:"/addManager",
                type:"post",
                dataType:"json",
                data: {
                    "user":uname,
                },
                success:function (list){
                    listManager(list);
                },
                error:function (){}
            })
        })
    })
</script>
<body>
<form class="content" id="cont2">
<!--    <input type="text" name="search" id="search" value="" placeholder="查询内容">-->
<!--    <button type="button" name="submit" id="submit">搜索</button>-->
    <button type="button" name="insert" id="insert" >新增管理员</button>
    <button type="button" name="remove" id="remove" >移除管理员</button>
</form>
<!--<p id="test">程序开始后变换</p>-->
<table id="tab" border="1px" >
    <tr>
        <td width="40px"></td>
        <td width="80px">工号</td>
        <td width="150px">姓名</td>
        <td width="300px">权限</td>
        <td width="300px">备注</td>
    </tr>
</table>

<div id="addmanager" title="添加权限" style="z-index:1;position: relative">
    <form >
        <label>用户姓名</label>
        <input id="user">
        <br>
        <br><button type="button" id="submit" style="float: right">提交</button>
    </form>
</div>

</body>
</html>